<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="/typeUtil"  prefix="typeUtil"%>
	<button id="addButton">增加新房间</button>
	<c:if test="${empty requestScope.roomList }">
			<h1>没有类型信息</h1>
	</c:if>
	<c:if test="${!empty requestScope.roomList }">
		<table>
			<tr>
				<th>房间类型</th>
				<th>房间名称</th>
				<th>楼层</th>
				<th>折扣</th>
				<th>图片</th>
				<th>添加时间</th>
				<th>备注</th>
				<th>处理</th>
			</tr>
			<c:forEach items="${requestScope.roomList }" var="room">
				<tr>
					<td>${typeUtil:getTypeName(room.typeId)}</td>
					<td>${room.name}</td>
					<td>${room.floor }</td>
					<td>${room.discount }</td>
					<td>${room.pic }</td>
					<td>${room.addDate }</td>
					<td>${room.zcomment }</td>
					<td>
						<button class="changeButton" onclick="changeButtonFun(${room.id})">修改</button>
						<button onclick="deleteButtonFun(${room.id})">删除</button>
						<c:if test='${room.condi!=1}'>
							<button onclick="repairRoom(${room.id},${room.condi==0?2:0 })">
							<c:if test='${room.condi==2}'>维修完成</c:if>
							<c:if test='${room.condi==0}'>维修</c:if>
							</button>
						</c:if>
					</td>
				</tr>
			</c:forEach>
		</table>
	</c:if>
	<div id="add">
		<input type="hidden" id="roomId">
		<label>类型:<select id="typeId"></select><br>
		<label>名称:<input type="text" id="name"></label><br><br>
		<label>楼层:<input type="text" id="floor"></label><br><br>
		<label>图片:<input type="file" id="upload" name="file" accept=".jpg,.png,.jpeg" onchange="xmTanUploadImg(this)" /></label><br>
		<input type="button" id="submit_btn" value="上传"/><br>
		<img id="img1" src="/hotel/upload/default.jpeg" width="200" height="200"/><br>
		<label>折扣：<input type="text" id="discount" value="100"></label><br>
		<label>备注：</label><textarea cols="20" rows="20" id="zcomment"></textarea><br>
		<button id="change">修改</button>
		<button id="submit">提交</button>
		<button id="cancel">取消</button>
	</div>
	<style>
		#add{
			display:none;
		}
		#change{
			display:none;
		}
	</style>
	<script type="text/javascript" src="/hotel/js/ajaxfileupload.js"></script>
	<script type="text/javascript">
	//判断浏览器是否支持FileReader接口
	  if (typeof FileReader == 'undefined') {
	    alert("<h1>当前浏览器不支持FileReader接口</h1>");
	  } 
	  //选择图片，马上预览
	  function xmTanUploadImg(obj) {
	    var file = obj.files[0];
	    var reader = new FileReader();
	    reader.onload = function(e) {
			//alert(e)
	      var img = document.getElementById("img1");
	      img.src = e.target.result;
			img.width=200;
			img.height=200;
	    }
	    reader.readAsDataURL(file);
	  }
	function clearContent(){
		$('#typeId').val('')
		$('#name').val('');
		$('#floor').val('');
		$('#discount').val('100')
		document.getElementById('img1').src="/hotel/upload/default.jpeg";
		$('#zcomment').text('');
		var obj=document.getElementById('upload');
		obj.outerHTML=obj.outerHTML;
	}
	function setSelect(id){
		$('#typeId').empty()
		$.get("/hotel/room/getRoomTypeNameIdList",{},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			types=res.object
			for(var i=0;i<types.length;i++){
				//alert(types[i].id+' '+types[i].name)
				$('#typeId').append('<option value='+types[i].id+'>'+types[i].name+'</option>')
			}
			$('#typeId').val(id)
		})
	}
	$("#addButton").click(function(){
		var add=document.getElementById('add')
		add.style.display='block'
		var change=document.getElementById('change')
		change.style.display='none'
		var submit=document.getElementById('submit')
		submit.style.display='inline'
		clearContent()
		setSelect(0)
	})
	$("#submit").click(function(){
		data={"typeId":$("#typeId").val(),"name":$("#name").val(),"floor":$("#floor").val(),"discount":$("#discount").val(),
				"pic":"default.jpeg","zcomment":$("#zcomment").val()};
		//alert(JSON.stringify(data))
		$.post("/hotel/room/addRoom.do",data,function(str){
			var res=eval('(' +str + ')')
			alert(res.message);
			if(res.code==0){
				var imgurl = document.getElementById("upload").value;
				//alert(imgurl)
			    $.ajaxFileUpload({
			        url:"/hotel/room/uploadRoomPic",
			        fileElementId: "upload", //文件上传域的ID，这里是input的ID，而不是img的
			        dataType: 'json', //返回值类型 一般设置为json
			        data:{"id":res.object},
			        contentType: "application/x-www-form-urlencoded; charset=utf-8",
			        success: function (data) {
			           // alert(data.code+" "+ data.msg);
			            if (data.code==0){
			                window.location.href="/hotel/system/mainPage"
			            }else{
			            	//alert("图片上传失败，原因为"+data.message)
			            	window.location.href="/hotel/system/mainPage"
			            }     
			        }

			    });
					
			}else{
				alert(res.message);
			}
		});
	})
		function changeButtonFun(id){
			var add=document.getElementById('add')
			add.style.display='block'
			var change=document.getElementById('change')
			change.style.display='inline'
			var submit=document.getElementById('submit')
			submit.style.display='none'
			clearContent()
			$.get("/hotel/room/getRoomInfo?id="+id,{},function(res){
				var tn=eval('(' +res + ')').object
				//alert(ad.username)
				$('#roomId').val(tn.id)
				$("#name").val(tn.name)
				//alert($('#typeId').val())
				$('#floor').val(tn.floor);
				setSelect(tn.typeId)
				document.getElementById('img1').src="/hotel/upload/"+tn.pic;
				$('#discount').val(tn.discount)
				$('#zcomment').text(tn.zcomment);
			})
		}
		function deleteButtonFun(id){
			if(confirm("您确定要删除该房间吗？")){
				$.post("/hotel/room/deleteRoom.do",{"id":id},function(str){
					var res=eval('(' +str + ')')
					//alert(res.message);
					if(res.code==0){
						window.location.href="/hotel/system/mainPage"
					}else{
						alert(res.message);
					}
				});
			}
		}
		function repairRoom(id,code){
			if(!confirm('确定修改房间维修情况？'))
				return
			$.post("/hotel/room/repairRoom.do",{"id":id,"code":code},function(str){
				var res=eval('(' +str + ')')
				//alert(res.message);
				if(res.code==0){
					window.location.href="/hotel/system/mainPage"
				}else{
					alert(res.message);
				}
			});
		}
		$("#change").click(function(){
			var changePic=true;
			if(document.getElementById('upload').value==''){
				changePic=false;
			}else{
				changePic=true;
			}
			//alert(change+' '+pic)
			data={id:$('#roomId').val(),"typeId":$("#typeId").val(),"name":$("#name").val(),"floor":$("#floor").val(),"discount":$("#discount").val(),
					"pic":"default.jpeg","zcomment":$("#zcomment").val()};
			//alert(JSON.stringify(data))
			$.post("/hotel/room/changeRoomInfo.do",data,function(str){
				var res=eval('(' +str + ')')
				//alert(res.message);
				if(res.code==0){
					if(!changePic){
		                window.location.href="/hotel/system/mainPage"
						return;
					}
					var imgurl = document.getElementById("upload").value;
					//alert(imgurl)
				    $.ajaxFileUpload({
				        url:"/hotel/room/uploadRoomPic",
				        fileElementId: "upload", //文件上传域的ID，这里是input的ID，而不是img的
				        dataType: 'json', //返回值类型 一般设置为json
				        data:{"id":res.object},
				        contentType: "application/x-www-form-urlencoded; charset=utf-8",
				        success: function (data) {
				           // alert(data.code+" "+ data.msg);
				            if (data.code==0){
				                window.location.href="/hotel/system/mainPage"
				            }else{
				            	//alert("图片上传失败，原因为"+data.message)
				            	window.location.href="/hotel/system/mainPage"
				            }     
				        }

				    });
						
				}else{
					alert(res.message);
				}
			});
		})
		$("#cancel").click(function(){
			var add=document.getElementById('add')
			add.style.display='none'
			clearContent()
		})
	</script>
</html>